<template>

  <div class="notification">
    <a :href="'/user/' + msg.operateUserId" class="" target="_blank">
      <img :src="msg.operateUserPhoto" class="notification-img" loading="lazy" />
    </a>
    <div class="notification-right">
      <div class="notification-content">
        <div class="profile">
          <a :href="'/user/' + msg.operateUserId" class="" target="_blank">
            <span class="name">{{msg.operateUserName}}</span>
          </a>
          评论了你的文章
          <a :href="'/article/detail/' + msg.relatedId">
          <span class="title-article">
            {{msg.relatedInfo}}
          </span>
          </a>
        </div>
      </div>
      <div class="notification-comment">{{msg.msg}}</div>
      <div class="notification-bottom">
      <span class="notification-time">
        {{format(new Date(msg.createTime), 'yyyy-MM-dd HH:mm:ss')}}
      </span>
        <div class="notification-action">
          <a :href="'/article/detail/' + msg.relatedId" class="notification-action-item">
            <img class="read-comment-praise"
                 src="" />
            <span class="action-text">点赞</span>
          </a>
<!--          TODO 加上锚点-->
<!--          <a :href="'/article/detail/' + msg.relatedId + '#commentList'" class="notification-action-item">-->
          <a :href="'/article/detail/' + msg.relatedId" class="notification-action-item">
            <img
              class="read-comment-praise"
              src="" />
            <span class="action-text">回复</span>
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">

import type { NoticeMsgType } from '@/http/ResponseTypes/NoticeType/NoticeMsgType'
import { format } from 'date-fns'

const props = defineProps<{
  msg: NoticeMsgType
}>()

</script>



<style scoped>

</style>
